<template>
    <div class="bg">
       <nav-com title="分红" :showView='showView' @back="backHandler()"></nav-com>
       <div class="box_padding">
       <van-row class="bonus_part1">
           <div class="bonus_part1_title">奖池总奖励</div>
           <div class="bonus_part1_list">
                <ul>
                    <li v-for="(item,index) in numList" :key="index">
                        <img :src="item.img" />
                        <div>
                            <p>{{item.fttLevelName}}</p>
                            <span>{{item.totalMoney}}</span>
                        </div>
                    </li>
                </ul>
           </div>
       </van-row>
       
       <van-row v-if="fttLevel=='F3'" class="bonus_part3">
           
           <div class="bonus_part3_title">
               <p>周分红奖励</p>
               <span>试用主管</span>
           </div>
           <ul class="bonus_part3_list">
               <li>
                   <p style="color:#FF5852;">{{week}}</p>
               </li>
           </ul>
       </van-row>
       </div>

    </div>
</template>
<script>
import f1 from '../../assets/f1.png'
import f2 from '../../assets/f2.png'
import f3 from '../../assets/f3.png'
import f4 from '../../assets/f4.png'

import {getFttprofits,getFttuserUserId,getFtts}  from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'bonus',
    components:{
        navCom
    },
    data() {
        return {
            uid: weixin.getUserId(),
            showView:false,
            numList:[],
            list:[],
            roleLevel:'',
            rankingFlag:false,
            isLoading:false,
            week:'',
            fttLevel:'',
            countMoney:0,
            loading:true,
            finished:false,
            total:0,
            pageNo:1,
        }
    },
    mounted(){
        this.init()
        
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        
        init(){
            
            let arr = new Map([
                ['F4',f4],['F3',f3],['F2',f2],['F1',f1]
            ])
            let arr2 = new Map([
                ['F4','主管'],['F3','试用主管'],['F2','创客'],['F1','XXX推广员']
            ])
            //奖池总奖励
            getFttprofits({sort:'id ASC'}).then(res=>{
                if(res.data.code == 200){
                    this.numList = res.data.data.rows
                    this.numList.forEach((item,index)=>{
                        this.numList[index].img = arr.get(item.fttLevel)
                        this.numList[index].fttLevelName = arr2.get(item.fttLevel)
                    })
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }

            })


            
            //周分红
            getFtts().then(res=>{
                if(res.data.code == 200){
                    this.week = res.data.data.fttWeekProfitTotal
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
            
            //我的等级
            getFttuserUserId({userId:this.uid}).then(res=>{
                if(res.data.code == 200){
                    
                    this.fttLevel = res.data.data.fttLevel
                    
                }
            })
            
        },

    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.bg {background: #F1F3F6; min-height: 100vh;}
.box_padding {margin-left:3%; margin-right:3%;}
.bonus_part1 {padding-top:4vw;}
.bonus_part1_title { height:10.66vw; color:#fff; padding-left:2.6vw; line-height: 10.66vw; background: url(../../assets/kuang.png); background-size:100%;}
.bonus_part1_list {background:#fff; }
.bonus_part1_list ul {display: flex;width:100%; flex-wrap: wrap; justify-content: space-between;}
.bonus_part1_list li {width:50%; display: flex;}
.bonus_part1_list ul li img { width:6.9vw; height:6.9vw;margin-left:5.3vw; margin-top:5.3vw;}
.bonus_part1_list ul li p {margin-left:2.6vw; margin-top:5.3vw;}
.bonus_part1_list ul li span {margin-left:2.6vw; color:#FF5852;}
.bonus_part1_list ul {padding-bottom:4vw;}
.orders_con {background: #fff;margin-top:4vw; height:14.66vw; position: relative; font-size:3.7vw;}
.orders_con p {margin-left:4vw; line-height: 14.66vw;}
.orders_sel { display:block; position: absolute; top:4.6vw; left:26.66vw; border-radius: 2.6vw; font-size:2.9vw; text-align: center; width:15.73vw; height:5.3vw; line-height: 5.3vw; background:#FF5112; color:#fff;}
.orders_con span { margin-right:4vw; font-size:3.4vw; color:#999; margin-top:5.6vw;}
.orders_con span img {width:2vw; height:3.6vw;}
.bonus_part2_title {margin-top:4vw; display:flex;}
.bonus_part2_title i {background: #FF491F; display:block; height: 4vw; width:0.8vw; }
.bonus_part2_title span {font-size:3.7vw; display:block; padding-left:2.6vw; font-weight: bold;}
.bonus_part3_title {height:10.66vw; margin-top:4vw; display: flex; justify-content: space-between; color:#fff;  line-height: 10.66vw; background: url(../../assets/kuang.png); background-size:100%;}
.bonus_part3_title p {padding-left:6vw;}
.bonus_part3_title span { display: block; width:18vw; margin-right:13.33vw;}
.bonus_part3_list {width:100%; background: #fff; padding-bottom:4vw;}
.bonus_part3_list li {display: flex; justify-content: space-between; padding-top:4vw;}
.bonus_part3_list li p {padding-left:6vw;}
.bonus_part3_list li span {display: block; width:18vw; margin-right:13.33vw;}
</style>